@charset "UTF-8";
* {
  padding: 0;
  margin: 0; }

.tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  height: 1.33333rem;
  background-color: #fff;
  border-top: 1px solid #eee; }
  .tabbar__item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1; }
    .tabbar__item.on .icon {
      -webkit-animation: heartBeat 1s ease-in-out;
              animation: heartBeat 1s ease-in-out; }
      .tabbar__item.on .icon .transition_move1 {
        -webkit-animation: blockMove 0.5s 0.3s forwards;
                animation: blockMove 0.5s 0.3s forwards; }
      .tabbar__item.on .icon .transition_move2 {
        -webkit-animation: blockMove 0.5s 0.35s forwards;
                animation: blockMove 0.5s 0.35s forwards; }
      .tabbar__item.on .icon .transition_move3 {
        -webkit-animation: blockMove 0.5s 0.4s forwards;
                animation: blockMove 0.5s 0.4s forwards; }
      .tabbar__item.on .icon .path-circle {
        -webkit-animation: circlePath 1s forwards;
                animation: circlePath 1s forwards; }
      .tabbar__item.on .icon .path-arrow {
        -webkit-animation: arrowPath 1s forwards;
                animation: arrowPath 1s forwards; }
      .tabbar__item.on .icon .min_circle01 {
        -webkit-animation: circleMove 1s forwards;
                animation: circleMove 1s forwards; }
      .tabbar__item.on .icon .min_circle02 {
        -webkit-animation: circleMove 1s 0.15s ease forwards;
                animation: circleMove 1s 0.15s ease forwards; }
      .tabbar__item.on .icon .min_circle03 {
        -webkit-animation: circleMove 1s 0.3s ease forwards;
                animation: circleMove 1s 0.3s ease forwards; }
      .tabbar__item.on .icon .path-mouth {
        -webkit-animation: mouthPath 1s forwards;
                animation: mouthPath 1s forwards; }
    .tabbar__item.on .tabbar__name {
      color: #698AFF; }
  .tabbar__svg {
    width: 0.64rem;
    height: 0.64rem;
    margin: 0 auto; }
  .tabbar__name {
    padding-top: 2px;
    font-size: 0.26667rem;
    text-align: center;
    color: #AFB8CC;
    -webkit-transition: all .3s;
            transition: all .3s; }
  .tabbar .icon {
    -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
            transform-origin: center center;
    stroke-linecap: round; }
    .tabbar .icon .transition_move1 {
      -webkit-transform-origin: left bottom;
          -ms-transform-origin: left bottom;
              transform-origin: left bottom;
      -webkit-transform: translate(-48px, 50px);
          -ms-transform: translate(-48px, 50px);
              transform: translate(-48px, 50px); }
    .tabbar .icon .transition_move2 {
      -webkit-transform-origin: left bottom;
          -ms-transform-origin: left bottom;
              transform-origin: left bottom;
      -webkit-transform: translate(-48px, 50px);
          -ms-transform: translate(-48px, 50px);
              transform: translate(-48px, 50px); }
    .tabbar .icon .transition_move3 {
      -webkit-transform-origin: left bottom;
          -ms-transform-origin: left bottom;
              transform-origin: left bottom;
      -webkit-transform: translate(-48px, 50px);
          -ms-transform: translate(-48px, 50px);
              transform: translate(-48px, 50px); }
    .tabbar .icon .path-circle {
      stroke-linecap: round;
      stroke-dasharray: 44 44;
      stroke-dashoffset: 0; }
    .tabbar .icon .path-arrow {
      stroke-linecap: round;
      stroke-dasharray: 39 39;
      stroke-dashoffset: 0; }
    .tabbar .icon .min_circle01 {
      -webkit-transform-origin: 13px 24px;
          -ms-transform-origin: 13px 24px;
              transform-origin: 13px 24px; }
    .tabbar .icon .min_circle02 {
      -webkit-transform-origin: 25px 24px;
          -ms-transform-origin: 25px 24px;
              transform-origin: 25px 24px; }
    .tabbar .icon .min_circle03 {
      -webkit-transform-origin: 37px 24px;
          -ms-transform-origin: 37px 24px;
              transform-origin: 37px 24px; }
    .tabbar .icon .path-mouth {
      stroke-linecap: round;
      stroke-dasharray: 23 23;
      stroke-dashoffset: 0; }

/**
 * 生成路径的关键帧动画
 * @params $keyframes 关键帧名
 * @params $dashoffset 偏移值
 * @params $startColor 路径开始颜色
 * @params $endColor 路径结束的颜色
 */
@-webkit-keyframes circlePath {
  0% {
    stroke-dashoffset: 0;
    stroke: #AFB8CC; }
  50% {
    stroke-dashoffset: 44;
    stroke: #AFB8CC; }
  50.1% {
    stroke-dashoffset: -44;
    stroke: #ffffff; }
  70% {
    stroke-dashoffset: -44;
    stroke: #ffffff; }
  100% {
    stroke-dashoffset: 0;
    stroke: #ffffff; } }
@keyframes circlePath {
  0% {
    stroke-dashoffset: 0;
    stroke: #AFB8CC; }
  50% {
    stroke-dashoffset: 44;
    stroke: #AFB8CC; }
  50.1% {
    stroke-dashoffset: -44;
    stroke: #ffffff; }
  70% {
    stroke-dashoffset: -44;
    stroke: #ffffff; }
  100% {
    stroke-dashoffset: 0;
    stroke: #ffffff; } }
@-webkit-keyframes arrowPath {
  0% {
    stroke-dashoffset: 0;
    stroke: #AFB8CC; }
  50% {
    stroke-dashoffset: 39;
    stroke: #AFB8CC; }
  50.1% {
    stroke-dashoffset: -39;
    stroke: #ffffff; }
  70% {
    stroke-dashoffset: -39;
    stroke: #ffffff; }
  100% {
    stroke-dashoffset: 0;
    stroke: #ffffff; } }
@keyframes arrowPath {
  0% {
    stroke-dashoffset: 0;
    stroke: #AFB8CC; }
  50% {
    stroke-dashoffset: 39;
    stroke: #AFB8CC; }
  50.1% {
    stroke-dashoffset: -39;
    stroke: #ffffff; }
  70% {
    stroke-dashoffset: -39;
    stroke: #ffffff; }
  100% {
    stroke-dashoffset: 0;
    stroke: #ffffff; } }
@-webkit-keyframes mouthPath {
  0% {
    stroke-dashoffset: 0;
    stroke: #AFB8CC; }
  50% {
    stroke-dashoffset: 23;
    stroke: #AFB8CC; }
  50.1% {
    stroke-dashoffset: -23;
    stroke: #ffffff; }
  70% {
    stroke-dashoffset: -23;
    stroke: #ffffff; }
  100% {
    stroke-dashoffset: 0;
    stroke: #ffffff; } }
@keyframes mouthPath {
  0% {
    stroke-dashoffset: 0;
    stroke: #AFB8CC; }
  50% {
    stroke-dashoffset: 23;
    stroke: #AFB8CC; }
  50.1% {
    stroke-dashoffset: -23;
    stroke: #ffffff; }
  70% {
    stroke-dashoffset: -23;
    stroke: #ffffff; }
  100% {
    stroke-dashoffset: 0;
    stroke: #ffffff; } }
@-webkit-keyframes blockMove {
  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }
@keyframes blockMove {
  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }
@-webkit-keyframes circleMove {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    fill: "#B1BACD"; }
  50% {
    -webkit-transform: scale(0);
            transform: scale(0);
    fill: "#B1BACD"; }
  50.1% {
    -webkit-transform: scale(1);
            transform: scale(1);
    fill: "#B1BACD"; }
  70% {
    -webkit-transform: scale(1) translateY(10px);
            transform: scale(1) translateY(10px);
    fill: #fff; }
  80% {
    -webkit-transform: scale(1) translateY(0px);
            transform: scale(1) translateY(0px);
    fill: #fff; }
  85% {
    -webkit-transform: scale(1) translateY(-2px);
            transform: scale(1) translateY(-2px);
    fill: #fff; }
  100% {
    -webkit-transform: scale(1) translateY(0px);
            transform: scale(1) translateY(0px);
    fill: #fff; } }
@keyframes circleMove {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    fill: "#B1BACD"; }
  50% {
    -webkit-transform: scale(0);
            transform: scale(0);
    fill: "#B1BACD"; }
  50.1% {
    -webkit-transform: scale(1);
            transform: scale(1);
    fill: "#B1BACD"; }
  70% {
    -webkit-transform: scale(1) translateY(10px);
            transform: scale(1) translateY(10px);
    fill: #fff; }
  80% {
    -webkit-transform: scale(1) translateY(0px);
            transform: scale(1) translateY(0px);
    fill: #fff; }
  85% {
    -webkit-transform: scale(1) translateY(-2px);
            transform: scale(1) translateY(-2px);
    fill: #fff; }
  100% {
    -webkit-transform: scale(1) translateY(0px);
            transform: scale(1) translateY(0px);
    fill: #fff; } }
@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  14% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8); }
  28% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  42% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9); }
  90% {
    -webkit-transform: scale(1);
            transform: scale(1); } }
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  14% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8); }
  28% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  42% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9); }
  90% {
    -webkit-transform: scale(1);
            transform: scale(1); } }
